import React, {Component} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import WebViews from "../pages/WebViews";
import {THEMECOLOR} from "../config/main";

export default class RepositoryCell extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data      : this.props.projectModel.item,
            isFavorite: this.props.projectModel.isFavorite
        }
    }

    setFavorite() {
        this.setState({
            isFavorite: !this.state.isFavorite
        })
    }

    onPressFavorite() {
        this.setFavorite()
        this.props.onFavorite(this.state.data, !this.state.isFavorite)
    }

    render() {
        let favoriteIcon = (
            <TouchableOpacity onPress={() => {
                this.onPressFavorite()
            }}>
                <Image style={{width: 20, height: 20, tintColor: THEMECOLOR}}
                       source={this.state.isFavorite ? require('../../res/images/ic_star.png') : require('../../res/images/ic_unstar_transparent.png')}/>
            </TouchableOpacity>
        )
        return (
            <TouchableOpacity onPress={() => {
                this.props.navigator.push({
                    component: WebViews,
                    params   : {
                        url  : this.state.data.html_url,
                        title: this.state.data.full_name,
                        ...this.props
                    }
                })
            }}>
                <View style={styles.cell_container}>
                    <Text style={styles.title}>{this.state.data.full_name}</Text>
                    <Text style={styles.description}>{this.state.data.description}</Text>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                        <View style={{flexDirection: 'row'}}>
                            <Text>Author:</Text>
                            <Image style={{width: 20, height: 20}} source={{uri: this.state.data.owner.avatar_url}}/>
                        </View>
                        <View style={{flexDirection: 'row'}}>
                            <Text>Star:</Text>
                            <Text>{this.state.data.stargazers_count}</Text>
                        </View>
                        {favoriteIcon}
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    title         : {
        fontSize    : 16,
        marginBottom: 2,
        color       : '#212121'
    },
    description   : {
        fontSize    : 14,
        marginBottom: 2,
        color       : '#757575',
        borderRadius: 2,
    },
    cell_container: {
        backgroundColor: 'white',
        padding        : 10,
        marginLeft     : 5,
        marginRight    : 5,
        marginVertical : 3,
        borderWidth    : 0.5,
        shadowColor    : 'gray',
        shadowOffset   : {width: 0.5, height: 0.5},
        shadowOpacity  : 0.4,
        shadowRadius   : 1,
        elevation      : 2
    }
})